



var page=1;

function loadXMLDoc(){
    var xmlhttp;
    if(window.XMLHttpRequest){
        xmlhttp = new XMLHttpRequest();
    }else {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function(){
        if (xmlhttp.readyState==4 && xmlhttp.status==200){
            var json=JSON.parse(xmlhttp.responseText);
            for(let i=0;i<json.shop.length;i++){
                var img = document.createElement('img');
                img.src=json.shop[i].pic;
                var h3=document.createElement('h4');
                h3.innerHTML=json.shop[i].title;
                var p =document.createElement('p');
                p.innerHTML=json.shop[i].desc;
                var p2=document.createElement('p');
                p2.innerHTML="￥";
                var span = document.createElement('span');
                span.innerHTML=json.shop[i].price;
                p2.appendChild(span);
                var div = document.createElement('div');
                div.appendChild(img);
                div.appendChild(h3);
                div.appendChild(p);
                div.appendChild(p2);

                document.querySelector("#list").appendChild(div);

            }
        }
    };
    xmlhttp.open("GET",page+".json",true);
    xmlhttp.send();
}

loadXMLDoc();


document.querySelector("#btn").addEventListener('click',function(){
    if (page>=4){
        page=1;
    }else {
        page++;
    }
    document.querySelector("#list").innerHTML='';
    loadXMLDoc();
})
